<!-- @format -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>大学习截图收集</title>
    <!-- 引入 FrozenUI -->
    <link
      rel="stylesheet"
      href="http://i.gtimg.cn/vipstyle/frozenui/2.0.0/css/frozen.css"
    />
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width,minimum-scale=1.0 maximum-scale=1.0 user-scalable=no"
    />
    <style>
      h1 {
        width: 100%;
        text-align: center;
        font-size: 26px;
        padding-top: 20px;
        padding-bottom: 20px;
        background: #fff;
      }
      .yg-toast {
        position: fixed;
        background: rgba(0, 0, 0, 0.7);
        border-radius: 4px;
        top: 90%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 60%;
        text-align: center;
        transition: all 0.1s;
      }
      .yg-toast-text {
        color: #fff;
        padding: 4px 10px;
        padding-bottom: 6px;
      }
      .author {
        margin-top: 12px;
        text-align: center;
        font-size: small;
        color: #999999;
      }
    </style>
  </head>
  <body>
    <div class="ui-form ui-border-t">
      <h1 class="title"><i id="classnum">{{.class}}</i>班截图收集</h1>
      <div class="ui-tooltips ui-tooltips-guide">
        <div class="ui-tooltips-cnt ui-tooltips-cnt-link ui-border-b">
          <i class="ui-icon-talk"></i>转发收集页面即可进行截图收集
        </div>
      </div>
      <div class="ui-tooltips ui-tooltips-guide">
        <div class="ui-tooltips-cnt ui-tooltips-cnt-link ui-border-b">
          <i class="ui-icon-talk"></i>打开下载页面即可查看提交信息及打包下载
        </div>
      </div>
      <div class="ui-tooltips ui-tooltips-guide">
        <div class="ui-tooltips-cnt ui-tooltips-cnt-link ui-border-b">
          <i class="ui-icon-talk"></i>此程序收集命名方式只适用于软件学院
        </div>
      </div>
      <div
        class="ui-form-item ui-form-item-link ui-border-b"
        onclick="pagesubmit()"
      >
        <label>
          收集页面
        </label>
      </div>
      <section class="ui-input-wrap ui-border-t">
        <div class="ui-input ui-border-radius">
          <input id="submitUrl" type="text" />
        </div>
        <button class="ui-btn" onclick="copysubmit()">复制</button>
        <button class="ui-btn" onclick="pagesubmit()">打开</button>
      </section>
      <div
        class="ui-form-item ui-form-item-link ui-border-b"
        onclick="pagedown()"
      >
        <label>
          下载页面
        </label>
      </div>
      <section class="ui-input-wrap ui-border-t">
        <div class="ui-input ui-border-radius">
          <input id="downUrl" type="text" />
        </div>
        <button class="ui-btn" onclick="copydown()">复制</button>
        <button class="ui-btn" onclick="pagedown()">打开</button>
      </section>
    </div>
    <div class="author">---项目作者:hu QQ:1091740788---</div>
  </body>
  <script type="text/javascript">
    window.onload = function () //用window的onload事件，窗体加载完毕的时候
    {
      classnum = document.getElementById("classnum").innerHTML;
      document.getElementById("submitUrl").value =
        "http://62.234.184.226/submit/" + classnum;
      document.getElementById("downUrl").value =
        "http://62.234.184.226/read/" + classnum;
    };
    //立即执行函数
    (function (window, undefined) {
      var Ygtoast = function () {
        //构造函数大驼峰命名法
      };
      Ygtoast.prototype = {
        //prototype 属性使您有能力向对象添加属性和方法。
        create: function (str, duration) {
          let self = this;
          var toastHtml = "";
          var toastText = '<div class="yg-toast-text">' + str + "</div>";
          toastHtml = '<div class="yg-toast">' + toastText + "</div>";
          if (document.querySelector(".yg-toast")) return; //当还没hide时禁止重复点击
          document.body.insertAdjacentHTML("beforeend", toastHtml);
          duration == null ? (duration = 2000) : ""; //如果toast没有加上时间，默认2000毫秒；
          self.show();
          setTimeout(function () {
            self.hide();
          }, duration);
        },
        show: function () {
          let self = this;
          document.querySelector(".yg-toast").style.display = "block";
          document.querySelector(".yg-toast").style.marginTop =
            "-" +
            Math.round(document.querySelector(".yg-toast").offsetHeight / 2) +
            "px";
          if (document.querySelector(".yg-toast")) return;
        },
        hide: function () {
          var self = this;
          if (document.querySelector(".yg-toast")) {
            document
              .querySelector(".yg-toast")
              .parentNode.removeChild(document.querySelector(".yg-toast"));
          }
        },
        toast: function (str, duration) {
          var self = this;
          return self.create(str, duration);
        },
      };
      window.Ygtoast = Ygtoast;
    })(window);
    function copysubmit() {
      var Url2 = document.getElementById("submitUrl");
      Url2.select(); // 选择对象
      document.execCommand("Copy"); // 执行浏览器复制命令
      // Toast
      var yg = new Ygtoast();
      yg.toast("复制成功", 1500);
    }
    function copydown() {
      var Url2 = document.getElementById("downUrl");
      Url2.select(); // 选择对象
      document.execCommand("Copy"); // 执行浏览器复制命令
      // Toast
      var yg = new Ygtoast();
      yg.toast("复制成功", 1500);
    }
    function pagesubmit() {
      window.location.href = document.getElementById("submitUrl").value;
    }
    function pagedown() {
      window.location.href = document.getElementById("downUrl").value;
    }
  </script>
</html>
